<template>
  <div class="info-index-container">
    <van-nav-bar 
      title="个人信息"
      @click-left="clickBackPerson"
      left-arrow
      left-text="返回"
    />

    <div class="content">
      <common-row title="头像">
        <img 
          :src="photo || ''" alt=""
          @click="showAvatar = true"
          />
      </common-row>

      <common-row title="昵称">
        <span
          @click="
            handlePushPath({
              key: 'name',
              text: '昵称',
              value: infoData.name
            })
          "
          >{{ infoData.name }}</span
        > 
      </common-row>

      <common-row title="简介">
        <span
          @click="
            handlePushPath({
              key: 'intro',
              text: '简介',
              value: infoData.intro              
            })
          "
          >{{ infoData.intro }}</span
        >
      </common-row>

      <common-row title="性别">
        <span @click="showGender = true">{{ !!infoData.gender? "男" : "女" }}</span>
      </common-row>

      <common-row title="生日">
        <span @click="handleShowDatePicker">{{
          `${infoData.birthday.split("-")[0]}-${
            infoData.birthday.split("-")[1]
          }-${infoData.birthday.split("-")[2]}`
        }}</span>
      </common-row>
    </div>

    <div class="footer">
      <van-button type="danger">退出登录</van-button>
    </div>

    <van-action-sheet
      v-model:show="showGender"
      :actions="actionsGender"
      cancel-text="取消"
      close-on-click-action
      @cancel="showGender = false"
      @select="selectGneder"
    />

    <van-action-sheet
      v-model:show="showAvatar"
      :actions="actionsAvatar"
      cancel-text="取消"
      close-on-click-action
      @cancel="showAvatar = false"
      @select="selectAvatar"
    />

    <van-popup
      v-model:show="showDatePicker"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        :min-date="new Date(1900, 0, 1)"
        :max-date="new Date()"
        @confirm="handleSureDate"
        @cancel="showDatePicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup lang='ts'>
import { IDateSlectedOptions } from "@/assets/constant/info_index.ts";
import { onMounted, ref, watch } from "vue";
import { editUserInfoData, getUserInfoData } from "@/assets/api/infoIndex";
import { LocationQueryRaw, useRouter } from "vue-router";
import { ActionSheetAction } from "vant";

const showGender = ref(false)
const actionsGender = ref([
  {name: '女' },
  {name: '男' }
])

const actionsAvatar = ref([
  {name: '拍照'},
  {name: '相册'}
])

const selectGneder = (actions: ActionSheetAction, index: number) => {
  infoData.value.gender = index
  updateUserInfo()

}

const selectAvatar = (actions: ActionSheetAction, index: number) => {
  if(index === 0) {
    JK.pickerCamera()
  } else if(index === 1) {
    JK.pickerPhoto()
  }
}
const infoData = ref({
  name: "",
  gender: 1,
  birthday: "",
  intro: "",
  real_name: "",
});

const clickBackPerson = () => {
  console.log(12121);
  
  JK.backToMine()
}

const getUserInfoDealData = async() => {
  const res = await getUserInfoData();
  console.log(res);
  const data = res.data;
  infoData.value = {
    name: data?.name || "",
    gender: data?.gender,
    intro: data?.intro || "",
    real_name: "",
    birthday: data?.birthday,
  };
  photo.value = data?.photo || "";
  const birthday = new Date(data.birthday)
  currentDate.value =[birthday.getFullYear(), ( birthday.getMonth()+1), birthday.getDay()]
}


onMounted(async () => {
  await getUserInfoDealData()
});

const $router = useRouter();
const showAvatar = ref(false)

const handlePushPath = (query: LocationQueryRaw) => {
  $router.push({
    name: "edit",
    query,
  });
};

const photo = ref("");

const handleShowDatePicker = () => {
  showDatePicker.value = true;
};
const showDatePicker = ref(false);
const currentDate = ref([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDay(),
]);

watch(currentDate, (newValue) => {
  infoData.value.birthday =newValue[0] + '-' + newValue[1] + '-' + newValue[2]


});

const updateUserInfo = async() => {
  const params = infoData.value
  const res =await editUserInfoData(params)
  console.log(res);
}

const handleSureDate = async(options: IDateSlectedOptions) => {
  console.log(options, options.selectedValues);
  currentDate.value = options.selectedValues;
  showDatePicker.value = false;
  updateUserInfo()
  

};
</script>

<style lang='less'>
.info-index-container {
  padding: 0.4rem;
  width: 100%;
  height: 100%;

  .content {
    img {
      width: 1rem;
      height: 1rem;
      object-fit: cover;
    }
  }

  .footer {
    .van-button {
      width: 100%;
      margin-top: 1.2rem;
    }
  }

  .van-action-sheet__cancel {
    margin-bottom: .8rem;
  }
}
</style>